<template>
  <div id="home">
    <!-- 头部 -->
    <div class="header">
      <Headers></Headers>
    </div>
    <!-- 轮播图 -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/1/16750696994721675064103381microscope-4415778.jpg" alt="" style="width:100%">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/0/16750698299771675064174941%E5%AE%98%E7%BD%91%E5%8F%82%E8%80%83%E5%9B%BE2.jpg" alt="" style="width:100%">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/0/16750698898791675064194812iot%E6%99%BA%E8%83%BD.jpg" alt="" style="width:100%">
        </van-swipe-item>
      </van-swipe>

    </div>
    <div class="boxstyle">
      <div class="box01">
        <input type="text" v-model="datavalue" placeholder="请输入订单号">
        <van-icon name="close" class="icon-name iconstyle" @click.stop="onClose" v-if="datavalue != ''" />
        <div class="button_style">
          <van-icon name="search" class="icon-name" @click.stop="onClosequrey" />
        </div>
      </div>
    </div>

    <!-- 服务领域 -->
    <div class="servers">
      <div class="servers_title">
        <span>服务领域</span>
      </div>
      <div class="servers_concent">
        <div class="servers_concent_up">
          <div class="servers_concent_1">
            生物医药服务
          </div>
          <div class="servers_concent_1">
            医学检测服务
          </div>
          <div class="servers_concent_1">
            诊断试剂服务
          </div>
        </div>
        <div class="servers_concent_next">
          <div class="servers_concent_1">
            医疗器械服务
          </div>
          <div class="servers_concent_1" style="margin:0 0 0 5%;">
            临床供应链服务
          </div>
        </div>
      </div>
    </div>
    <!-- 我们的优势 -->
    <!-- <div class="superiority">
      <div class="superiority_title">
        <span>我们的优势</span>
      </div>
      <div class="superiority_concent">
        <div class="superiority_concent_up">
          <div class="superiority_concent_1">
            <div>
              <span class="iconfont icon-cheliangguanli" style="font-size: 4rem"></span>
            </div>
            <div class="superiority_concent_1_title">
              专业的冷链服务能力
            </div>
          </div>
          <div class="superiority_concent_1">
            <div>
              <span class="iconfont icon-24gl-fileText" style="font-size: 4rem"></span>
            </div>
            <div class="superiority_concent_1_title">
              完善的质量体系及合规能力
            </div>
          </div>
          <div class="superiority_concent_1">
            <div>
              <span class="iconfont icon-diannao-shuju" style="font-size: 4rem"></span>
            </div>
            <div class="superiority_concent_1_title">
              全程可视化、可追溯、精准控温
            </div>
          </div>
        </div>
        <div class="superiority_concent_next">
          <div class="superiority_concent_1">
            <div>
              <span class="iconfont icon-shimingrenzheng" style="font-size: 4rem"></span>
            </div>
            <div class="superiority_concent_1_title">
              众多药企、实验室、CRO的认可
            </div>
          </div>
          <div class="superiority_concent_1" style="margin:0 0 0 5%;">
            <div>
              <span class="iconfont icon-wangluo" style="font-size: 4rem"></span>
            </div>
            <div class="superiority_concent_1_title">
              合规、丰富、高质量的全国网络
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="superiority">
      <div class="superiority_title">
        <span>我们的优势</span>
      </div>
      <div class="superiority_concent">
        <div class="superiority_line">
          <div style="display:flex;vertical-align:middle;color:#ecac54;">
            <div class="iconfont icon-cheliangguanli superiority_left" style="font-size: 3rem;"></div>
            <div class="superiority_size"> 专业的冷链服务能力</div>
          </div>
        </div>
        <div class="superiority_line">
          <div style="display:flex;vertical-align:middle;color:#ecac54;">
            <div class="iconfont icon-24gl-fileText superiority_left" style="font-size: 3rem;"></div>
            <div class="superiority_size" > 完善的质量体系及合规能力</div>
          </div>
        </div>
        <div class="superiority_line">
          <div style="display:flex;vertical-align:middle;color:#ecac54;">
            <div class="iconfont icon-diannao-shuju superiority_left" style="font-size: 3rem;"></div>
            <div class="superiority_size" > 全程可视化、可追溯、精准控温</div>
          </div>
        </div>
        <div class="superiority_line">
          <div style="display:flex;vertical-align:middle;color:#ecac54;">
            <div class="iconfont iconfont icon-shimingrenzheng superiority_left" style="font-size: 3rem;"></div>
            <div class="superiority_size"> 众多药企、实验室、CRO的认可</div>
          </div>
        </div>
        <div class="superiority_line">
          <div style="display:flex;vertical-align:middle;color:#ecac54;">
            <div class="iconfont icon-wangluo superiority_left" style="font-size: 3rem;"></div>
            <div class="superiority_size"> 合规、丰富、高质量的全国网络</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 网络覆盖 -->
    <div class="network">
      <div class="network_title">
        <span>网络覆盖</span>
      </div>
      <div style="padding:1rem">
        <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/1/1676272064387map.jpg" alt="" srcset="" style="width:100%">
      </div>
    </div>
    <!-- 主要内容 -->
    <div class="mainContent">
      <div class="mainContent_concent">
        <div class="mainContent_concent_up">
          <div class="mainContent_concent_1">
            <div>5个</div>
            <div>全国大区</div>
          </div>
          <div class="mainContent_concent_1">
            <div>26个</div>
            <div>省会级揽收城市</div>
          </div>
          <div class="mainContent_concent_1" style=" border-right: none;">
            <div>676条</div>
            <div>省会级干线运输路线</div>
          </div>
        </div>
        <div class="mainContent_concent_next">
          <div class="mainContent_concent_1">
            <div>300个</div>
            <div>地级市配送服务</div>
          </div>
          <div class="mainContent_concent_1" style=" border-right: none;">
            <div>7800条</div>
            <div>门到门运输路线</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>

</template>
<script >
import { ref } from 'vue';
import Headers from "../components/headers.vue"
import Footer from "../components/footer.vue"
export default {
  name: "home",
  setup() {
    const datavalue = ref("")
    return { datavalue }

  },
  components: {
    Headers,
    Footer
  },
  methods: {
    onClosequrey() {
      // 带查询参数，变成 /register?userId=123
      this.$router.push({ path: '/ServiceSupport', query: { orderNumber: this.datavalue + "" } })
    },
    onClose() {
      this.datavalue = ""
    }
  }
}
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
}
.iconstyle {
  display: inline-block;
  position: absolute;
  margin-top: 0.7rem;
  left: 24.7rem;
  z-index: 2;
}
.boxstyle {
  /* width: 80%; */
  height: 4rem;
  background: #fafafa;

  border-radius: 0.2rem;
  top: -2rem;
  z-index: 999;
  margin: 0 auto;
  margin: 0rem 3rem 0rem 3rem;
}
.box01 {
  color: #434343;
  position: relative;
  display: flex;
  padding: 0.8rem 0rem 0rem 0rem;
  /* background: red; */
}
.box01 input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  width: 24.7rem;
  height: 2.5rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.1rem 0.1rem rgba(193, 144, 144, 0.1);
  margin-left: 2rem;
  border: none;
  background: #ffffff;
}
.button_style {
  width: 4rem;
  height: 2.5rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
  background: #fe9400;
  color: white;
  line-height: 2.5rem;
  font-size: 1.5em;
  padding: 0rem 0rem 0rem 1rem;
}
.servers {
  width: 100%;
  top:-2rem;
  padding: 0rem 3rem 1.6rem 3rem;
}
.servers_title {
  text-align: center;
  padding: 2rem 3rem 2rem 3rem;
}
.servers_concent {
  /* display: flex;
  justify-content: space-between; */
}
.servers_concent_up {
  display: flex;
  justify-content: space-between;
}
.servers_concent_next {
  display: flex;
  justify-content: center;
}
.servers_concent_1 {
  width: 30%;
  height: 6rem;
  color: #ffffff;
  background: #4296e5;
  text-align: center;
  line-height: 6rem;
  margin-bottom: 1rem;
}
.superiority {
  width: 100%;
 top: -2rem;
}
.superiority_title {
  text-align: center;
  padding: 0 0 2rem 0;
}
.superiority_concent {
  padding: 1rem 3rem 0rem 3rem;
}
.superiority_concent_up {
  display: flex;
  justify-content: space-between;
}
.superiority_concent_next {
  display: flex;
  justify-content: center;
}
.superiority_concent_1 {
  width: 30%;
  color: #e99d42;
  text-align: center;
  line-height: 2rem;
  margin-bottom: 1rem;
}
.superiority_concent_1_title {
  margin: 1rem 0 0 0;
  line-height: 2rem;
}
.network {
  /* top: -2rem; */
  padding: 0rem 3rem 0rem 3rem;
}
.network_title {
  text-align: center;
  padding: 0 0 2rem 0;
}
.mainContent {
  /* top: -2rem; */
  padding: 0rem 3rem 1.6rem 3rem;
}
.mainContent_concent_up {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.mainContent_concent_next {
  display: flex;
  justify-content: center;
}
.mainContent_concent_1 {
  width: 34%;
  height: 7rem;
  color: #2c3e50;
  text-align: center;
  line-height: 2rem;
  border-right: 0.2rem solid #e99d42;
  padding: 1.5rem 0rem 0rem 0rem;
}
.footer {
  background: black;
  /* top: -2rem; */
  padding: 1rem 0rem 0.1rem 0rem;
}

.superiority_line {
  line-height: 2rem;
  background: #ffffff;
  display: flex;
  align-self: center;
  min-height: 8rem;
  margin-bottom: 1rem;
  padding: 2rem;
  box-shadow: 0rem 0.2rem 0.8rem 0rem rgba(240, 172, 84, 0.15);
}
.superiority_left {
  min-width: 3rem;
  display: flex;
  align-self: center;
  padding: 0 2rem 0rem 0rem;
}
.superiority_size {
  display: flex;
  align-self: center;
}
</style>